<script>
export default {
  name: 'earnings',
  methods: {
    goPage(path) {
      this.$router.push(path);
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}`;
      } else if (type === 'month') {
        return `${val}`;
      }
      return val;
    },
    confirmDate() {
      this.currentDateShow = this.currentDate;
      this.show = false;
    },
  },
  data() {
    return {
      show: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2025, 10, 1),
      currentDate: new Date(),
      currentDateShow: new Date(),
    };
  },
  computed: {
    // currentDate  转换为 2024年11月
    currentYearMonth() {
      return `${this.currentDateShow.getFullYear()}年${this.currentDateShow.getMonth() + 1}月`;
    },
  },
};
</script>

<template>
  <frame-view class="index" title="收益明细">
    <div style="display: flex;justify-content: space-between;margin-top: 24px">
      <div style="color: #222222" @click="show=true">
        {{ currentYearMonth }}
        <van-icon name="arrow-down" size="16" color="#222222" />
      </div>
      <div>
        11月累计收入: <span style="color: #FF1212">1640.37</span> 元
      </div>
    </div>
    <div style="color: #222222;display: flex;height: 132px;background: #FFFFFF;justify-content: space-evenly;align-items: center;margin-top: 24px;font-size: 24px;border-radius: 24px;" v-for="i in 10" @click="goPage('/index/earnings/today')">
      <div >11月26日</div>
      <div style="display: flex;flex-direction: column">
        <p style="color: #999999">节点数量</p>
        <p style="font-size: 36px;text-align: center;margin-top: 12px">8</p>
      </div>
      <div style="display: flex;flex-direction: column">
        <p style="color: #999999">贡献宽带(Mbps)</p>
        <p style="font-size: 36px;text-align: center;margin-top: 12px">4.90</p>
      </div>
      <div style="display: flex;flex-direction: column">
        <p style="color: #999999">产出收益(元)</p>
        <p style="font-size: 36px;text-align: center;margin-top: 12px">20</p>
      </div>

    </div>

    <van-popup
      v-model="show"
      position="bottom"
      round
    >
      <van-datetime-picker
        v-model="currentDate"
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        item-height="52"
      >
        <template #default>
          <div style="text-align: center;font-weight: bold;width: 100%;position:relative;">
            选择收益日期
            <van-icon @click="show = false" name="cross" size="24" color="#222222" style="position: absolute;right: 32px"/>
          </div>
        </template>


      </van-datetime-picker>

      <van-button @click="confirmDate" round type="info" style="width: 686px;height: 80px;margin: 16px 32px">保存</van-button>

    </van-popup>

  </frame-view>
</template>


<style scoped lang="scss">

</style>
